class Role extends React.Component{

    constructor(props){
        super(props);
        this.state = {roles : [],perms : []};
        this.permIds = "";
    }
    componentDidMount(){
        this.tableRef = this.refs.permsTable;
        this.updateTable(1,10);
    }

    updateTable(page,pageSize){
        let params = {page:page,pageSize:pageSize};
        postJson("/property/app/role/queryPage.x",params,(data)=>{
            this.pageCount = data.data.size;
            this.setState({roles : data.data.list});
        })
    }

    showAddModal(){
        this.refs.addModal.show();
    }

    showPermsModal(){
        this.updatePermsTable(1,10);
        this.refs.permsModal.show();
    }

    assign(role){
        postJson("/property/app/role/getPerms.x",{id:role.id},(data)=>{
            this.refs.permsTable.checkboxValue = data.data;
            this.setState({});
            this.permsModalModifyRole = role;
            this.showPermsModal();
        })
    }

    updatePermsTable(page,pageSize){
        let params = {page:page,pageSize:pageSize};
        postJson("/property/app/module/query.x",params,(data)=>{
            this.permsPageCount = data.data.size;
            this.setState({perms : data.data.list});
        })
    }

    addPerms(){
        this.perms = this.refs.permsTable.checkboxValue;

        let strShow = "";
        this.permIds = "";
        for (let i = 0; i < this.perms.length; i++) {
            strShow += this.perms[i].name + ",";
            this.permIds += this.perms[i].id+",";
        }

        if(this.permsModalModifyRole){
            this.permsModalModifyRole.appPermIds = this.permIds;
            postJson("/property/app/role/save.x",this.permsModalModifyRole,()=>{
                layui.layer.msg("权限修改成功");
            })
            this.permsModalModifyRole = null;

        }else {
            this.refs.ids.value = strShow;
        }

        this.refs.permsModal.close();
    }

    addRole(){
        let params = {
            appPermIds : this.permIds,
            name : this.refs.name.value,
            description: this.refs.description.value
        }
        postJson("/property/app/role/save.x",params,()=>{
            layui.layer.msg("添加角色成功");
            this.refs.roleTable.refresh();
            this.refs.addModal.close();
        })
    }

    deleteRole(role){
        layui.layer.confirm("确认要删除么",(index)=>{
            postJson("/property/app/role/delete.x",{id:role.id},()=>{
                layui.layer.msg("删除角色成功");
                this.refs.roleTable.refresh();
            })
            layui.layer.close(index);
        });

    }

    render(){
        return (
            <Frame header="角色管理" tips="分配app端不同功能的访问权限<br>功能内的细分权限暂按员工类型来区分"
                   headerBtns={<HeaderBtn onClick={()=>this.showAddModal()}>新增角色</HeaderBtn>}>
                <Table count={this.pageCount} pageOnClick={(page,pageSize)=>this.updateTable(page,pageSize)} ref="roleTable">
                    <thead>
                        <tr>
                            <th>角色名称</th>
                            <th>角色说明</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    {
                        this.state.roles.length > 0?this.state.roles.map((role)=>{
                            return (
                                <tr>
                                    <td>{role.name}</td>
                                    <td>{role.description}</td>
                                    <td>
                                        <Button className="layui-btn layui-btn-xs" onClick={()=>this.assign(role)}>分配APP权限</Button>
                                        <Button className="layui-btn layui-btn-danger layui-btn-xs" onClick={()=>this.deleteRole(role)}>删除</Button>
                                    </td>
                                </tr>
                            )
                        }):''
                    }
                </Table>
                <Modal ref="addModal" area={['400']}>
                    <Form size="sm">
                        <Item>
                            <Label>名称</Label>
                            <Input lay-verify="required" ref="name"/>
                        </Item>
                        <Item>
                            <Label>描述</Label>
                            <Input lay-verify="required" ref="description"/>
                        </Item>
                        <Item>
                            <Label>分配权限</Label>
                            <ButtonInput onClick={()=>this.showPermsModal()} size="sm" ref="ids" readonly="readonly"></ButtonInput>
                        </Item>
                        <Item>
                            <Button className="layui-form-btn" type="normal" size="sm" lay-submit="true" onClick={()=>this.addRole()}>确定</Button>
                        </Item>
                    </Form>
                </Modal>
                <Form>
                    <Modal ref="permsModal" title="添加权限" area={['800px']}>
                        <Table
                            count={this.permsPageCount}
                            pageOnClick={(page,pageSize)=>this.updatePermsTable(page,pageSize)}
                            toolbar={[<Button className="layui-btn layui-btn-sm" onClick={()=>this.addPerms()}>确认添加</Button>]}
                            ref="permsTable"
                            pageData={this.state.perms}
                            noLimit={true}
                            checkboxRenderCallback={()=>{this.setState({})}}
                            checkboxKeyname="id"
                        >
                            <thead>
                            <tr>
                                <th width={70}><TCheckbox checkall={true} tableRef={this.tableRef}></TCheckbox></th>
                                <th>名称</th>
                                <th>说明</th>
                            </tr>
                            </thead>
                            {
                                this.state.perms.length > 0?this.state.perms.map((perm)=>{
                                    return (
                                        <tr>
                                            <td><TCheckbox data={perm} tableRef={this.tableRef}></TCheckbox></td>
                                            <td>{perm.name}</td>
                                            <td>{perm.description}</td>
                                        </tr>
                                    )
                                }):''
                            }
                        </Table>
                    </Modal>
                </Form>
            </Frame>
        )
    }
}

ReactDOM.render(<Role/>, document.getElementById("appRole"));